<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>子元素选择器</title>
		<style>
			*{
				font-size: 14px;
				font-family: "微软雅黑";
			}
			
			p{
				color: red;
			}
			
			ul{
				list-style: none;
			}
			
			ul li{
				width: 80px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				background-color: #ccc;
			}
			
			input[type=button]{
				background-color: #ef5b00;
				color: white;
				height: 30px;
				line-height: 30px;
				text-align: left;
				display: block;
				cursor: pointer;
				font-size: 12px;
				width: 350px;
				font-family: "微软雅黑";
				/*去掉边框的关键代码*/
				border: 0 none;
			}
			
		</style>
	</head>
	<body>

	    <!-- 需求： 在每个 ul 查找第 2 个li-->
	    
	    <p>5虎上将</p>
		<ul>
		  <li>关羽</li>
		  <li>张飞</li>
		  <li>赵云</li>
		  <li>马超</li>
		  <li>黄忠</li>
		</ul>
		
		<p>明教4大护法</p>
		<ul>
		  <li>金毛狮王</li>
		  <li>白眉鹰王</li>
		  <li>青翼蝠王</li>
		  <li>紫衫龙王</li>
		</ul>
		
		<input type="button" onclick="search();" value="== 查找每个ul下第 2 个li (nth-child 下标从1开始) ==" />
		<br><br>
		<input type="button" onclick="search3();" value="== 查找每个ul下第 基数odd个li (nth-child 下标从1开始) ==" />
		<br><br>
		<input type="button" onclick="search2();" value="== 查找第1个ul下的第 2 个li (eq 下标从0开始) ==" />
	</body>
	<!--Step1:导入jquery-->
	<script type="text/javascript" src="../../../js/jquery-1.4.1.js" ></script>
	<script>
		function search(){
			var elements = $("ul li:nth-child(2)");
			elements.css("background-color","#ef5b00");
			
			elements.each(function(index,data){
				console.log("index=["+index+"],data=["+data.textContent+"]");
			});
		}
		
		function search3(){
			var elements = $("ul li:nth-child(odd)");
			elements.css("background-color","#ef5b00");
			
			elements.each(function(index,data){
				console.log("index=["+index+"],data=["+data.textContent+"]");
			});
		}
		
		function search2(){
			var elements = $("ul li:eq(1)");
			elements.css("background-color","#ef5b00");
			
			elements.each(function(index,data){
				console.log("index=["+index+"],data=["+data.textContent+"]");
			});
		}
	</script>
</html>

<!--
	作者：offline
	时间：2016-05-27
	描述：nth-child选择器语法总结
	
	1:匹配其父元素下的第N个子或奇偶元素
	2:要匹配元素的序号，从1开始
-->
